<template>
  <!-- 商品详情-关联直播分析8 135 -->
  <div
    id="asslive"
    v-infinite-scroll="loadMore"
    infinite-scroll-disabled="busy"
    infinite-scroll-distance="0"
    infinite-scroll-immediate-check="false"
  >
    <div v-if="vipRootObj[8][135].owner">
      <!-- <radio_group v-if="$store.state.classify_options.length!=0"
                 :radio_values="$store.state.classify_options[0]"
                 v-model="value01"
                 title="达人行业"
      class="mb_30 mt_40" />-->
      <section class="s1">
        <p>开播时间</p>
        <el-date-picker
          v-model="value02"
          class="mr_30 long_time"
          type="daterange"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          value-format="yyyy-MM-dd"
          prefix-icon="el-icon-arrow-down"
          unlink-panels
          :clearable="false"
          :picker-options="pickerOptions"
          :default-value="[
            timestamp((new Date().getTime() - 2626560000) / 1000, 'Y-M-D'),
            timestamp(new Date().getTime() / 1000, 'Y-M-D'),
          ]"
        ></el-date-picker>
        <section class="input_group">
          <input
            type="text"
            v-model="input01"
            placeholder="请输入直播标题搜索"
            @keyup.enter="search_input()"
          />
          <div @click="search_input()">
            <img src="../../../assets/meng/search01.png" />
          </div>
        </section>
      </section>
      <table class="table mt_20" ref="capture">
        <thead>
          <tr>
            <th>直播间</th>
            <th>达人</th>
            <th>
              开播时间
              <img
                src="@/assets/meng/up_down.png"
                v-if="order_by == 'asc' && sort == 'BeginTime'"
              />
              <img src="@/assets/meng/no_up_down.png" v-else @click="sort_fun(true, 1)" />
              <img src="@/assets/meng/down_up.png" v-if="order_by == 'desc' && sort == 'BeginTime'" />
              <img src="@/assets/meng/no_down_up.png" v-else @click="sort_fun(false, 1)" />
            </th>
            <th>
              观看人数峰值
              <img
                src="@/assets/meng/up_down.png"
                v-if="order_by == 'asc' && sort == 'PeoplePeak'"
              />
              <img src="@/assets/meng/no_up_down.png" v-else @click="sort_fun(true, 2)" />
              <img
                src="@/assets/meng/down_up.png"
                v-if="order_by == 'desc' && sort == 'PeoplePeak'"
              />
              <img src="@/assets/meng/no_down_up.png" v-else @click="sort_fun(false, 2)" />
            </th>
            <th>
              直播销量（预估）
              <img
                src="@/assets/meng/up_down.png"
                v-if="order_by == 'asc' && sort == 'livevolume'"
              />
              <img src="@/assets/meng/no_up_down.png" v-else @click="sort_fun(true, 3)" />
              <img
                src="@/assets/meng/down_up.png"
                v-if="order_by == 'desc' && sort == 'livevolume'"
              />
              <img src="@/assets/meng/no_down_up.png" v-else @click="sort_fun(false, 3)" />
            </th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in table_data01" :key="'table' + index">
            <td>
              <div class="td01Box">
                <div class="td01Left" @click="go_to_page02(item.roomId)">
                  <img :src="item.roomLogo" />
                  <div v-show="item.status == 1" class="liveingBox">
                    <p class="livingGif">
                      <span></span>
                      <span></span>
                      <span></span>
                      <span></span>
                    </p>
                    <span>直播中</span>
                  </div>
                </div>
                <div class="td01Right">
                  <div class="titleBox">
                    <el-popover placement="bottom" trigger="hover" popper-class="hot_video_popover">
                      <vue-qr
                        :size="150"
                        :margin="0"
                        :auto-color="true"
                        :dot-scale="1"
                        :text="item.roomUrl"
                      />
                      <p>【抖音扫码，查看商品】</p>
                      <img slot="reference" src="@/assets/meng/hot_video13.png" class="ewmImg" />
                    </el-popover>
                    <img
                      v-if="item.isShop == 1"
                      src="../../../assets/meng/pop01.png"
                      class="shopCartImg"
                    />
                    <img v-if="item.isRed == 1" src="../../../assets/meng/pop02.png" class="redImg" />
                    <el-tooltip
                      effect="light"
                      :content="item.roomTitle"
                      :hide-after="2000"
                      placement="top"
                      popper-class="mytooltip"
                    >
                      <span
                        class="roomTitle"
                        @click="go_to_page02(item.roomId)"
                      >{{ item.roomTitle }}</span>
                    </el-tooltip>
                  </div>
                </div>
              </div>
            </td>
            <td>
              <div class="td02Box">
                <el-tooltip
                  effect="light"
                  :content="item.nickName"
                  :hide-after="2000"
                  placement="top"
                  popper-class="mytooltip"
                >
                  <p class="dot" @click="go_to_page01(item.authorId)">{{ item.nickName }}</p>
                </el-tooltip>
                <p>粉丝数：{{ format_num(item.totalFans) }}</p>
              </div>
            </td>
            <td class="td03">{{ timestamp(item.beginTime, "Y-M-D h:m:s") }}</td>
            <td class="td04">{{ format_num(item.peoplePeak) }}</td>
            <td class="td05">{{ format_num(item.livevolume) }}</td>
            <td class="td06">
              <button @click="go_to_page02(item.roomId)">查看详情</button>
            </td>
          </tr>
        </tbody>
      </table>
      <div
        v-loading="loading"
        v-if="!(table_data01.length < (page01 - 1) * 50)"
        class="loading"
        element-loading-text="拼命加载中..."
        element-loading-spinner="el-icon-loading"
      ></div>
      <p
        class="nothing"
        v-show="
          table_data01.length != 0 && table_data01.length < (page01 - 1) * 50
        "
      >我是有底线的～</p>
      <div class="empty" v-show="!loading && table_data01.length == 0">
        <img src="@/assets/liu/zw.png" />
        <p>暂无数据</p>
      </div>
    </div>
    <!-- 优化后的示例图 -->
    <div v-else class="notVipBoxNewWl">
      <img :src="$global.staticUrl + 'image/egImg/live.png'" class="egBgImg" />
      <el-dialog
        :visible="true"
        :modal-append-to-body="false"
        :lock-scroll="false"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        :append-to-body="false"
        :show-close="false"
        custom-class="detailsDialog"
      >
        <div class="dialogEg">
          <!-- <PayEgBox routerName="asslive" :lowestVipNum="vipRootObj[8][103].ownerMinLevel" /> -->
          <payVip routerName="asslive" :lowestVipNum="vipRootObj[8][135].ownerMinLevel" />
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import VueQr from 'vue-qr';
import Person_center from '../person_center/person_center.vue';
export default {
  name: 'asslive',
  components: { VueQr, Person_center },
  data() {
    return {
      order_by: 'desc', //   表格头部排序
      sort: 'BeginTime', //   表格头部排序
      pickerOptions: {
        disabledDate(time) {
          let temp = new Date();
          temp.setTime(temp.getTime() - 24 * 60 * 60 * 1000 * 89);
          return time.getTime() > Date.now() || temp.getTime() > time.getTime();
        }
      },
      busy: false,
      loading: true,
      table_data01: [],
      page01: 1,
      input01: '',
      value01: '全部',
      value02: [],
      vipRootObj: this.$store.state.userRoot //会员权限对象
    };
  },
  props: ['id'],
  computed: {},
  created() {
    // console.log($store.state.is_vip+"vip");
    this.value02[1] = this.timestamp(Date.now() / 1000 - 24 * 60 * 60, 'Y-M-D');
    this.value02[0] = this.timestamp(Date.now() / 1000 - 86400 * 7, 'Y-M-D');
    if (this.vipRootObj[8][135].owner) {
      this.get_data();
      this.$watch(
        'value02',
        this.debounce((newValue, oldValue) => {
          this.page01 = 1;
          this.table_data01 = [];
          this.get_data();
        }, 0)
      );
      this.$watch(
        'input01',
        this.debounce((newValue, oldValue) => {
          if (newValue == '') {
            this.page01 = 1;
            this.table_data01 = [];
            this.get_data();
          }
        }, 0)
      );
    }
  },
  mounted() {},
  methods: {
    //   表格头部排序
    sort_fun(parm01, parm02) {
      if (parm01) {
        this.order_by = 'asc';
      } else {
        this.order_by = 'desc';
      }
      switch (parm02) {
        case 1:
          this.sort = 'BeginTime';
          break;
        case 2:
          this.sort = 'PeoplePeak';
          break;
        case 3:
          this.sort = 'livevolume';
          break;
      }
      this.page01 = 1;
      this.table_data01 = [];
      this.get_data();
    },
    get_data() {
      let that = this;
      this.loading = true;
      this.busy = true;
      // console.log("sort", this.sort);
      this.$axios({
        method: 'post',
        url: '/api/product/SearchProLive',
        // headers: { "content-type": "application/x-www-form-urlencoded" },
        data: {
          RoomTitle: this.trimStr(that.input01),
          ProId: that.id,
          BeginTime: that.value02[0],
          EndTime: that.value02[1],
          size: 50,
          page: that.page01,
          order_by: that.order_by,
          sort: that.sort
        }
      })
        .then(response => {
          this.loading = false;
          if (response.data.code == 0) {
            this.page01 += 1;
            this.table_data01 = this.table_data01.concat(response.data.data);
            response.data.data.length < 50 ? (this.busy = true) : (this.busy = false);
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    loadMore: function () {
      // console.log(666);
      this.get_data();
    },
    search_input() {
      this.page01 = 1;
      this.table_data01 = [];
      this.get_data();
    },
    go_to_page02(id) {
      let router = this.$router.resolve({
        path: `/talent_main/liveDetailsRoot/${id}/0`
      });
      window.open(router.href, '_blank');
    },
    go_to_page01(id) {
      let router = this.$router.resolve({
        path: `/talent_main/tdetails/${id}/0`
      });
      window.open(router.href, '_blank');
    }
  }
};
</script>
<style scoped lang='less'>
#asslive {
  width: 100%;
  min-height: 100vh;
  table {
    width: 100%;
    overflow: auto;
    thead {
      width: 100%;
      background-color: #f5f9ff;
      border-radius: 4px;
      img {
        width: 5px;
        height: 10px;
        vertical-align: 0;
        margin-right: 2px;
        cursor: pointer;
      }
      tr {
        height: 48px;
        font-size: 14px;
        color: #555555;
        th {
          white-space: normal !important;
        }
        th:nth-child(1) {
          width: 20%;
        }
        th:nth-child(2) {
          width: 15%;
        }
      }
    }
    tbody {
      width: 100%;
      tr {
        height: 161px;
      }
      .td06 {
        text-align: center;
        button {
          width: 88px;
          height: 32px;
          background-color: #fd7f2c;
          border-radius: 4px;
          font-size: 14px;
          font-weight: normal;
          font-stretch: normal;
          line-height: 30px;
          letter-spacing: 0px;
          color: #ffffff;
          text-align: center;
        }
      }
      .td03,
      .td04,
      .td05 {
        text-align: center;
        font-size: 16px;
        color: #222;
        font-family: DINAlternate-Bold;
      }
      .td02Box {
        width: 100%;
        text-align: center;
        overflow: hidden;
        p:nth-child(1) {
          margin: 0 auto;
          width: 100px;
          overflow: hidden;
          text-overflow: ellipsis;
          font-size: 16px;
          font-weight: 600;
          color: #222222;
          cursor: pointer;
        }
        p:nth-child(2) {
          font-size: 14px;
          color: #888888;
        }
      }
      .td01Box {
        overflow: hidden;
        display: flex;
        justify-content: flex-start;
        .td01Left {
          cursor: pointer;
          position: relative;
          padding-left: 2%;
          img {
            width: 80px;
            height: 100px;
            border-radius: 4px;
            border: 1px solid #e5e5e5;
          }
          .liveingBox {
            position: absolute;
            left: 0;
            bottom: 0;
            width: 81px;
            height: 22px;
            background-image: linear-gradient(90deg, #ff295d 1%, #fa4fa2 100%),
              linear-gradient(#ffffff, #ffffff);
            background-blend-mode: normal, normal;
            border-radius: 0px 0px 4px 4px;
            display: flex;
            justify-content: center;
            align-items: center;
            span {
              font-size: 12px;
              color: #ffffff;
            }
          }
        }
        .td01Right {
          margin-left: 23px;
          flex: 1;
          .titleBox {
            margin-top: 29px;
            // height: 30px;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            .roomTitle {
              font-size: 16px;
              color: #222222;
              font-weight: 600;
              width: 140px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              cursor: pointer;
            }
            img {
              display: block;
            }
            .ewmImg {
              width: 16px;
              height: 16px;
              margin-right: 5px;
            }
            .shopCartImg {
              width: 19px;
              height: 16px;
              margin-right: 5px;
            }
            .redImg {
              width: 13px;
              height: 16px;
              margin-right: 5px;
            }
          }
        }
      }
    }
  }
  .input_group {
    display: inline-block;
    position: relative;
    width: 308px;
    height: 32px;
    border-radius: 4px 4px 4px 4px;
    border: solid 1px #e5e5e5;
    box-sizing: border-box;
    input {
      width: 100%;
      font-size: 14px;
      background-color: #f5f5f5;
      height: 100%;
      box-sizing: border-box;
      padding-left: 11px;
      padding-right: 38px;
      border: none;
    }
    > div {
      position: absolute;
      right: 0;
      cursor: pointer;
      top: -1px;
      text-align: center;
      width: 38px;
      height: 32px;
      background-color: #1779ff;
      border-radius: 0px 4px 4px 0px;
      display: flex;
      align-items: center;
      justify-content: center;
      img {
        width: 15px;
      }
    }
  }
  .s1 {
    display: flex;
    align-items: center;
    margin-top: 30px;
    > p:nth-child(1) {
      font-size: 14px;
      color: #888888;
      margin-right: 16px;
    }
  }
}
</style>
